<template>
  <div class="app-container calendar-list-container">
    <div class="w-body">
      <el-form ref="entity" label-width="80px" size="small">
        <el-row>
          <el-col :span="5">
            <el-form-item label="当前订单" prop="orderNo">
              <el-input v-model="orderNo" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="当前工艺" prop="orderNo">
              <el-input v-model="entity.stepName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="出库仓库" prop="outWarehouseName">
              <el-input v-model="entity.outWarehouseName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="入库仓库" prop="inWarehouseName">
              <el-input v-model="entity.inWarehouseName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="名称" prop="materialName">
              <el-input v-model="goods.materialName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="global.modelName" prop="modelName">
              <el-input v-model="goods.modelName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="global.modelProp" prop="modelProp">
              <el-input v-model="goods.modelProp" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="数量" prop="quantity">
              <el-input v-model="goods.quantity" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="w-table">
        <buttons :showQuery="true" :showBack="false" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="订单号" :permissions="permissions" @inAdd="doInAdd"
          @outAdd="doOutAdd">
        </buttons>
        <grid gridTitle="加工单" :url="url" :columns="columns" :enableEdit="false" :loading="false" ref="mainGrid" height="auto" diffHeight="140" :pagination="true"
          :permissions="permissions" :multi="false" @change="rowCilck" :queryEntity="queryEntity" @outEdit="doOutEdit" @inEdit="doInEdit" @view="doView" @pass="doPass"
          @cancel="doCancel" @delete="doDelete" @finish="doFinish" @open="doOpen">
        </grid>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'
import url from '@/const/apiURL'
import GridDialog from '@/components/GridDialog'
import grid from '@/components/Grid'
import buttons from '@/components/Buttons'
import { mapGetters } from 'vuex'
import { BusinessOrderStatusFormatter, BusinessTypeFormatter, YesOrNoFormatter } from '@/const/dict'
import { bgColor } from '@/const/bgColor'


export default {
  components: { GridDialog, grid, buttons },
  data () {
    return {
      orderNo: '',
      goodsCode: '',
      url: url.BUSINESS_LIST_URL,
      entity: {},
      queryEntity: { includeStatus: ["UN_DO", "UN_CHECK", "FINISH"] },
      goods: {},
      disabled: true,
      columns: [
        {
          label: '操作', width: 200, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '编辑', clickName: 'outEdit', auth: 'business_out_edit', valueProp: "businessType", showValue: ["OUT"], showFomatter: function (row) { return row.orderStatus == "UN_CHECK" || row.orderStatus == "CANCEL" } },
            { name: '编辑', clickName: 'inEdit', auth: 'business_in_edit', valueProp: "businessType", showValue: ["IN"], showFomatter: function (row) { return row.orderStatus == "UN_CHECK" || row.orderStatus == "CANCEL" } },
            { name: '查看', clickName: 'view', auth: 'business_view' },
            { name: '取消', clickName: 'cancel', auth: 'business_cancel', confirm: true, valueProp: "orderStatus", showValue: ["UN_DO", "FINISH"] },
            { name: '通过', clickName: 'pass', auth: 'business_pass', confirm: true, valueProp: "orderStatus", showValue: ["UN_CHECK"] },
            { name: '删除', clickName: 'delete', auth: 'business_delete', confirm: true, valueProp: "orderStatus", showValue: ["UN_CHECK"] },
            { name: '完成', clickName: 'finish', auth: 'business_finish', valueProp: "businessType", showValue: ["OUT"], confirm: true, showFomatter: function (row) { return row.status == 0 } },
            { name: '开启', clickName: 'open', auth: 'business_open', valueProp: "businessType", showValue: ["OUT"], confirm: true, showFomatter: function (row) { return row.status == 1 } }
          ]
        },
        { label: '大货订单', width: 180, prop: 'orderNo', align: 'left' },
        { label: '加工单号', width: 180, prop: 'businessCode', align: 'left' },
        { label: this.global.modelName, width: 80, prop: 'modelName', align: 'center' },
        { label: this.global.modelProp, width: 100, prop: 'modelProp', align: 'center' },
        { label: '业务类型', width: 100, prop: 'businessType', align: 'center', formatter: BusinessTypeFormatter },
        { label: '客户名称', width: 200, prop: 'customerName', align: 'center' },
        { label: '仓库名称', width: 120, prop: 'warehouseName', align: 'center' },
        { label: '卷数', width: 80, prop: 'total', align: 'center' },
        { label: '数量', width: 90, prop: 'quantity', align: 'center' },
        { label: '订单状态', width: 100, prop: 'orderStatus', align: 'center', formatter: BusinessOrderStatusFormatter, template: 'bgColor', bgColor: bgColor().BusinessOrderStatus },
        { label: '是否完成', width: 80, prop: 'status', align: 'center', formatter: YesOrNoFormatter, template: 'bgColor', bgColor: bgColor().YesOrNo },
        { label: '发货时间', width: 100, prop: 'sendTime', align: 'center' },
        { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      btnList: [
        //   { name: '出库', type: 'primary', icon: 'edit', click: 'outAdd', auth: 'business_out_add', ctr: false },
        //{ name: '出库编辑', type: 'primary', icon: 'edit', click: 'outEdit', auth: 'business_out_edit', ctr: true },
        //   { name: '入库', type: 'primary', icon: 'edit', click: 'inAdd', auth: 'business_in_add', ctr: false },
        //  { name: '入库编辑', type: 'primary', icon: 'edit', click: 'inEdit', auth: 'business_in_edit', ctr: true },
        // { name: '查看', type: 'primary', icon: 'edit', click: 'view', auth: 'business_view', ctr: true },
        // { name: '通过', type: 'primary', icon: 'edit', click: 'pass', auth: 'business_pass', ctr: true, confirm: true },
        // { name: '取消', type: 'primary', icon: 'edit', click: 'cancel', auth: 'business_cancel', ctr: true, confirm: true },
        // { name: '删除', type: 'primary', icon: 'edit', click: 'delete', auth: 'business_delete', ctr: true, confirm: true },
        // { name: '完成加工', type: 'primary', icon: 'edit', click: 'finish', auth: 'business_finish', ctr: true, confirm: true },
        // { name: '打开加工', type: 'primary', icon: 'edit', click: 'open', auth: 'business_open', ctr: true, confirm: true }
      ]
    }
  },
  created () {
    this.orderNo = this.$route.query.orderNo
    this.code = this.$route.query.code
    this.goodsCode = this.$route.query.goodsCode
    this.queryEntity.goodsCode = this.$route.query.goodsCode
    this.queryEntity.orderNo = this.$route.query.orderNo
    this.init()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    init () {
      this.initData()
    },
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    doInAdd () {
      let params = { orderNo: this.orderNo, stepCode: this.entity.stepCode, goodsCode: this.goodsCode, inWarehouseCode: this.entity.inWarehouseCode, code: this.code }
      this.$router.push({ path: '/prod/business/in', query: params })
    },
    doOutAdd () {
      let params = { orderNo: this.orderNo, stepCode: this.entity.stepCode, goodsCode: this.goodsCode, outWarehouseCode: this.entity.outWarehouseCode, code: this.code }
      this.$router.push({ path: '/prod/business/out', query: params })
    },
    doOutEdit (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.$router.push({ path: '/prod/business/edit/out', query: { businessCode: row.businessCode, code: this.code, goodsCode: this.goodsCode } })
      }
    },
    doInEdit (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.$router.push({ path: '/prod/business/edit/in', query: { businessCode: row.businessCode, code: this.code, goodsCode: this.goodsCode } })
      }
    },
    doView (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.$router.push({ path: '/prod/business/view', query: { businessCode: row.businessCode, code: this.code, goodsCode: this.goodsCode } })
      }
    },
    doCancel (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.cancelOp(row.businessCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    cancelOp (businessCode) {
      return request({
        url: url.BUSINESS_CANCEL_URL,
        method: 'post',
        data: { key: 'key' },
        params: { businessCode: businessCode }
      })
    },
    doDelete (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.deleteOp(row.businessCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    deleteOp (businessCode) {
      return request({
        url: url.BUSINESS_DELETE_URL,
        method: 'post',
        data: { key: 'key' },
        params: { businessCode: businessCode }
      })
    },
    doPass (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.passOp(row.businessCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    passOp (businessCode) {
      return request({
        url: url.BUSINESS_PASS_URL,
        method: 'post',
        data: { key: 'key' },
        params: { businessCode: businessCode }
      })
    },
    doFinish (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.finishOp(row.businessCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    finishOp (businessCode) {
      return request({
        url: url.BUSINESS_FINISH_URL,
        method: 'post',
        data: { key: 'key' },
        params: { businessCode: businessCode }
      })
    },
    doOpen (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.openOp(row.businessCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    openOp (businessCode) {
      return request({
        url: url.BUSINESS_OPEN_URL,
        method: 'post',
        data: { key: 'key' },
        params: { businessCode: businessCode }
      })
    },
    initData () {
      this.viewUrl(this.code, 0).then(data => {
        if (data) {
          this.entity = data
          this.entity.goodsCode = this.goodsCode
          // this.queryEntity.orderNo = data.orderNo
          this.queryEntity.stepCode = data.stepCode
          if (data.outStatus) {
            this.btnList.push({ name: '出库', type: 'primary', icon: 'edit', click: 'outAdd', auth: 'business_out_add', ctr: false })
          }
          if (data.inStatus) {
            this.btnList.push({ name: '入库', type: 'primary', icon: 'edit', click: 'inAdd', auth: 'business_in_add', ctr: false })
          }
          this.doQuery()
        }
      })
      this.loadGoods(this.orderNo)
    },
    loadGoods (orderNo) {
      if (this.goodsCode) {
        this.goodsViewUrl(orderNo, this.goodsCode).then(data => {
          if (data) {
            this.goods = data
          }
        })
      }
    },
    goodsViewUrl (orderNo, goodsCode) {
      return request({
        url: url.ORDER_GOODS_VIEW_URL,
        method: 'post',
        data: { key: 'key' },
        params: { orderNo, goodsCode }
      })
    },
    viewUrl (code, type) {
      return request({
        url: url.ORDER_STEP_TYPE_VIEW_URL,
        method: 'post',
        data: { key: 'key' },
        params: { code, type }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-body {
  padding-top: 8px;
}
.w-table {
  border: 1px solid #ebeef5;
}
.w-table-title {
  border: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  color: gray;
}
</style>
